<template>
  <div class="home">
    <bank-base-info></bank-base-info>
    <div class="line"></div>
    <bank-score @onOpenBankScoreDetail="showBankScoreDetail = true">
      <v-chart :option="chartOption"></v-chart>
    </bank-score>
    <div class="line"></div>
    <div class="menu-wrapper">
      <div class="menu" v-for="(item, idx) in menus" :key="idx" @click="routerGo(item.path)">
        <svg-icon :name="item.icon" size="16" color="#fff"></svg-icon>
        <span>{{item.name}}</span>
      </div>
    </div>
    <v-modal :visible="showBankScoreDetail" title="评分详情" @on-close="showBankScoreDetail = false">
      <div class="chart-wrap">
        <v-chart :option="chartOption"></v-chart>
      </div>
      <ul class="score-dimension">
        <score-dimension
          v-for="(item, idx) in scoreDetails"
          :key="idx"
          :class="[{active: currentScoreIdx === idx}, `item-${idx}`]"
          :scoreItem="item"
          :idx="idx"
          @onScoreClick="scoreItemClick">
        </score-dimension>
      </ul>
      <div class="sub-score" v-if="subScore">
        <div class="sub-score-item" v-for="(item, idx) in subScore" :key="idx">
          <span>{{item.name}}</span>
          <span>{{item.score.toFixed(1)}}分</span>
        </div>
      </div>
      <table v-if="portrait">
        <thead>
          <tr>
            <th></th>
            <th>消费能力</th>
            <th>年龄分布</th>
            <th>生育状况</th>
            <th>车产状况</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(subItem, subIdx) in portrait" :key="subIdx">
            <td>{{subItem.type}}</td>
            <td v-for="(score, scoreIdx) in subItem.score" :key="scoreIdx">{{score}}分</td>
          </tr>
        </tbody>
      </table>
      <div class="interpretation">
        <h3>
          <svg-icon name="interpretation" size="16" color="RGBA(218, 38, 85, 1)"></svg-icon>
          <span>评分解读</span>
        </h3>
        <p v-for="(item, idx) in scoreDetails[currentScoreIdx].interpretation" :key="idx" v-html="item"></p>
      </div>
    </v-modal>
  </div>
</template>

<script>
import BankBaseInfo from '@/components/BankBaseInfo'
import BankScore from '@/components/BankScore'
import VChart from '@/components/VChart'
import VModal from '@/components/VModal'
import ScoreDimension from '@/components/ScoreDimension'

export default {
  name: 'Home',

  data () {
    return {
      chartOption: {
        radar: {
          indicator: [
            { name: '客群规模', max: 10 },
            { name: '在业企业', max: 10 },
            { name: '商业环境', max: 10 },
            { name: '同业竞争', max: 10 },
            { name: '交通设施', max: 10 },
            { name: '人群画像', max: 10 }
          ],
          radius: '68%',
          splitNumber: 5,
          axisName: {
            formatter: '{value}',
            color: '#fff'
          },
          splitArea: {
            areaStyle: {
              color: 'rgba(0, 0, 0, 0)'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, .5)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, .15)'
            }
          }
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            lineStyle: {
              width: 2,
              color: '#1DD586'
            },
            itemStyle: {
              color: '#1DD586'
            },
            areaStyle: {
              opacity: 0.3
            },
            data: [
              { name: '', value: [2.8, 5.2, 6.1, 8.3, 4.7, 7.9] }
            ]
          }
        ]
      },

      menus: [
        { name: '经营动态', icon: 'client', path: '/management' },
        { name: '业绩指标', icon: 'operating', path: '' },
        { name: '周边大数据', icon: 'digital', path: '' },
        { name: '营销地图', icon: 'marketing', path: '' },
        { name: '信用卡渗透率', icon: 'credit-card', path: '' }
      ],

      showBankScoreDetail: false,

      scoreDetails: [
        {
          name: '客群规模',
          score: 1.4,
          desc: '提供网点周边居住/工作人口数量，从静态视角观察网点覆盖市场情况。',
          subScore: [
            { name: '工作人群', score: 8.71908460636882 },
            { name: '居住人群', score: 8.71908460636882 }
          ],
          interpretation: [
            '1、本地人群显示出<b class="emphasis">学历较高、消费能力较高</b>的特征，适宜面向个人客户营销理财、保险、基金等个金产品。',
            '2、按从业人口数量计算，公司职员、医疗人员、公务员为居住人群的3大从业行业，公司职员、医疗人员、公务员为工作人群的3大从业行业',
            '3、在工作人群中，25-34岁占比40.12%，35-44岁占比33.72%，45-54岁占比11.24%，55岁以上占比4.58%。25-34岁、35-44岁人群占比<b class="emphasis">略高于全市均值</b>',
            '4、在居住人群中，25-34岁占比40.3%，35-44岁占比26.73%，45-54岁占比10.4%，55岁以上占比5.58%。其中55岁以上人群占比显著高于全市均值，45-54岁人群<b class="emphasis">略高于全市均值</b>。'
          ]
        },
        {
          name: '客群规模',
          score: 1.4,
          desc: '提供网点周边居住/工作人口数量，从静态视角观察网点覆盖市场情况。',
          portrait: [
            { type: '工作人群', score: [9.7, 9.6, 7.1, 7.9] },
            { type: '居住人群', score: [8.9, 9.3, 5.2, 7.9] }
          ],
          interpretation: [
            '1、本地人群显示出<b class="emphasis">学历较高、消费能力较高</b>的特征，适宜面向个人客户营销理财、保险、基金等个金产品。',
            '2、按从业人口数量计算，公司职员、医疗人员、公务员为居住人群的3大从业行业，公司职员、医疗人员、公务员为工作人群的3大从业行业',
            '3、在工作人群中，25-34岁占比40.12%，35-44岁占比33.72%，45-54岁占比11.24%，55岁以上占比4.58%。25-34岁、35-44岁人群占比<b class="emphasis">略高于全市均值</b>',
            '4、在居住人群中，25-34岁占比40.3%，35-44岁占比26.73%，45-54岁占比10.4%，55岁以上占比5.58%。其中55岁以上人群占比显著高于全市均值，45-54岁人群<b class="emphasis">略高于全市均值</b>。'
          ]
        },
        {
          name: '客群规模',
          score: 7.9,
          desc: '提供网点周边居住/工作人口数量，从静态视角观察网点覆盖市场情况。',
          subScore: [
            { name: '工作人群', score: 8.71908460636882 },
            { name: '居住人群', score: 8.71908460636882 }
          ],
          interpretation: [
            '1、本地人群显示出<b class="emphasis">学历较高、消费能力较高</b>的特征，适宜面向个人客户营销理财、保险、基金等个金产品。',
            '2、按从业人口数量计算，公司职员、医疗人员、公务员为居住人群的3大从业行业，公司职员、医疗人员、公务员为工作人群的3大从业行业',
            '3、在工作人群中，25-34岁占比40.12%，35-44岁占比33.72%，45-54岁占比11.24%，55岁以上占比4.58%。25-34岁、35-44岁人群占比<b class="emphasis">略高于全市均值</b>',
            '4、在居住人群中，25-34岁占比40.3%，35-44岁占比26.73%，45-54岁占比10.4%，55岁以上占比5.58%。其中55岁以上人群占比显著高于全市均值，45-54岁人群<b class="emphasis">略高于全市均值</b>。'
          ]
        },
        {
          name: '客群规模',
          score: 5.2,
          desc: '提供网点周边居住/工作人口数量，从静态视角观察网点覆盖市场情况。',
          subScore: [
            { name: '工作人群', score: 8.71908460636882 },
            { name: '居住人群', score: 8.71908460636882 }
          ],
          interpretation: [
            '1、本地人群显示出<b class="emphasis">学历较高、消费能力较高</b>的特征，适宜面向个人客户营销理财、保险、基金等个金产品。',
            '2、按从业人口数量计算，公司职员、医疗人员、公务员为居住人群的3大从业行业，公司职员、医疗人员、公务员为工作人群的3大从业行业',
            '3、在工作人群中，25-34岁占比40.12%，35-44岁占比33.72%，45-54岁占比11.24%，55岁以上占比4.58%。25-34岁、35-44岁人群占比<b class="emphasis">略高于全市均值</b>',
            '4、在居住人群中，25-34岁占比40.3%，35-44岁占比26.73%，45-54岁占比10.4%，55岁以上占比5.58%。其中55岁以上人群占比显著高于全市均值，45-54岁人群<b class="emphasis">略高于全市均值</b>。'
          ]
        },
        {
          name: '客群规模',
          score: 3.2,
          desc: '提供网点周边居住/工作人口数量，从静态视角观察网点覆盖市场情况。',
          subScore: [
            { name: '工作人群', score: 8.71908460636882 },
            { name: '居住人群', score: 8.71908460636882 }
          ],
          interpretation: [
            '1、本地人群显示出<b class="emphasis">学历较高、消费能力较高</b>的特征，适宜面向个人客户营销理财、保险、基金等个金产品。',
            '2、按从业人口数量计算，公司职员、医疗人员、公务员为居住人群的3大从业行业，公司职员、医疗人员、公务员为工作人群的3大从业行业',
            '3、在工作人群中，25-34岁占比40.12%，35-44岁占比33.72%，45-54岁占比11.24%，55岁以上占比4.58%。25-34岁、35-44岁人群占比<b class="emphasis">略高于全市均值</b>',
            '4、在居住人群中，25-34岁占比40.3%，35-44岁占比26.73%，45-54岁占比10.4%，55岁以上占比5.58%。其中55岁以上人群占比显著高于全市均值，45-54岁人群<b class="emphasis">略高于全市均值</b>。'
          ]
        },
        {
          name: '客群规模',
          score: 2.8,
          desc: '提供网点周边居住/工作人口数量，从静态视角观察网点覆盖市场情况。',
          subScore: [
            { name: '工作人群', score: 8.71908460636882 },
            { name: '居住人群', score: 8.71908460636882 }
          ],
          interpretation: [
            '1、本地人群显示出<b class="emphasis">学历较高、消费能力较高</b>的特征，适宜面向个人客户营销理财、保险、基金等个金产品。',
            '2、按从业人口数量计算，公司职员、医疗人员、公务员为居住人群的3大从业行业，公司职员、医疗人员、公务员为工作人群的3大从业行业',
            '3、在工作人群中，25-34岁占比40.12%，35-44岁占比33.72%，45-54岁占比11.24%，55岁以上占比4.58%。25-34岁、35-44岁人群占比<b class="emphasis">略高于全市均值</b>',
            '4、在居住人群中，25-34岁占比40.3%，35-44岁占比26.73%，45-54岁占比10.4%，55岁以上占比5.58%。其中55岁以上人群占比显著高于全市均值，45-54岁人群<b class="emphasis">略高于全市均值</b>。'
          ]
        }
      ],

      currentScoreIdx: 0
    }
  },

  computed: {
    subScore () {
      const { currentScoreIdx, scoreDetails } = this
      return scoreDetails[currentScoreIdx].subScore
    },

    portrait () {
      const { currentScoreIdx, scoreDetails } = this
      return scoreDetails[currentScoreIdx].portrait
    }
  },

  methods: {
    scoreItemClick (idx) {
      this.currentScoreIdx = idx
    },

    routerGo (path) {
      this.$router.push(path)
    }
  },

  components: {
    BankBaseInfo,
    BankScore,
    VChart,
    VModal,
    ScoreDimension
  }
}
</script>

<style lang="less" scoped>
.line {
  margin: 16px;
  height: 1px;
  background-color: rgba(255, 255, 255, .1);
}
.menu-wrapper {
  padding: 0 16px;
  .menu {
    height: 38px;
    border: 1px solid rgba(187, 187, 187, 1);
    background-color: rgba(58, 104, 174, .3);
    padding: 0 12px;
    display: flex;
    align-items: center;
    color: #fff;
    margin-bottom: 10px;
    border-radius: 2px;
    cursor: pointer;
    span {
      margin-left: 16px;
    }
  }
}
.chart-wrap {
  height: 250px;
  padding: 16px 0;
}
.score-dimension {
  display: flex;
  align-items: center;
}
.sub-score {
  display: flex;
  margin: 20px 0;
  .sub-score-item {
    width: 22%;
    height: 40px;
    color: #fff;
    background: rgba(58, 104, 174, 0.3);
    border: 1px solid #eeeeee;
    border-radius: 6px;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    box-sizing: border-box;
    span {
      font-size: 16px;
      &:last-child {
        font-size: 14px;
      }
    }
  }
}
.interpretation {
  background: rgba(245, 245, 245, 0.03);
  border-radius: 6px;
  padding: 16px;
  h3 {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    span {
      font-size: 14px;
      color: #fff;
      font-weight: 300;
      margin-left: 10px;
    }
  }
  p {
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
    line-height: 1.8;
  }
}
table {
  margin: 20px 0;
  font-size: 12px;
  width: 100%;
  border:1px solid rgba(255, 255, 255, 1);
  border-collapse:collapse;    //去掉边框间空隙
  thead {
    line-height: 3;
    border-color: #fff;
    th {
      color: #fff;
      border-color: #fff;
      border:1px solid rgba(255, 255, 255, 1);
    }
  }
  tbody {
    border-color: #fff;
    td {
      line-height: 2;
      text-align: center;
      padding: 4px 0;
      border-color: #fff;
      color: rgba(255, 255, 255, 0.6);
      border:1px solid rgba(255, 255, 255, 1);
    }
  }
}
</style>
